<script setup>

import { User, TrendCharts, Document } from '@element-plus/icons-vue'
</script>
<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <h1 class="welcome-title">欢迎使用尚品服饰管理系统</h1>
      <p class="welcome-subtitle">全面、管理、便捷的服饰管理系统</p>
      <div class="welcome-stats">
        <div class="stat-item">
          <el-icon><User /></el-icon>
          <span>产品信息管理</span>
        </div>
        <div class="stat-item">
          <el-icon><TrendCharts /></el-icon>
          <span>服饰便捷管理</span>
        </div>
        <div class="stat-item">
          <el-icon><Document /></el-icon>
          <span>动态科学管理</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>.welcome-container {
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
  url('@/assets/welcome.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.welcome-content {
  max-width: 800px;
  padding: 20px;
}

.welcome-title {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: bold;
}

.welcome-subtitle {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.welcome-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stat-item .el-icon {
  font-size: 2rem;
}

.stat-item span {
  font-size: 1rem;
}
</style>
